<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebDeploy-远程文件管理工具</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
        <form class="layui-form layui-form-pane" action="">
            <div class="layuimini-main">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        选择环境：
                        <select name="serverGroup" id="serverGroup" lay-verify="" lay-search>
                            <option value="" disabled></option>
                        </select>
                    </div>
                    <div class="layui-col-md3">
                        选择标签：
                        <select name="serverTitle" id="serverTitle" lay-verify="" lay-search>
                            <option value="" disabled></option>
                        </select>
                    </div>
                    <div class="layui-col-md6">
                        远程路径：
                        <input type="text" name="serverPath" id="serverPath" required  lay-verify="required" placeholder="请输入服务器路径" autocomplete="on" class="layui-input">
                    </div>
                </div>
            </div>
        </form>

    <hr class="layui-bg-red">

    <div style="margin-top: 20px;">
        <div class="layui-row">

            <div class="layui-col-md3">
                <div class="layui-upload-drag" id="btn1" style="margin-left: 50px;">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>

            <div class="layui-col-md9">
                <div class="layui-upload">
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="fileList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn" id="btn2" style="display: none">开始上传</button>
                </div>
            </div>
        </div>

        <pre class="">
        </pre>
    </div>

</div>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script type="text/javascript">

    layui.use(['form', "jquery","upload"], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let upload = layui.upload;

        //init select
        $.ajax({
            url: "/deploy/getServerEnv", type: "get", async: false, success: function (result) {
                let dataJson = JSON.parse(result);
                if (dataJson.code == 200) {
                    $.each(dataJson.data.serverGroup, function (index, item) {
                        $('#serverGroup').append(new Option(item, item));// 下拉菜单里添加元素
                    });
                    $.each(dataJson.data.serverTitle, function (index, item) {
                        $('#serverTitle').append(new Option(item, item));// 下拉菜单里添加元素
                    });
                    form.render('select');
                } else {
                    layer.msg("加载环境信息失败！");
                }
            }
        });

        let fileListView = $('#fileList')
        let uploadListIns  = upload.render({
            elem: '#btn1' //绑定元素
            ,url: '/deploy/uploadFile/' //上传接口
            ,auto:false
            ,accept:'file'
            ,size:0
            ,number:0
            ,bindAction: '#btn2'
            ,data:{
                env:function () {
                    return $('#serverGroup').find("option:selected").text();
                },
                title:function () {
                    return $('#serverTitle').find("option:selected").text();
                },
                serverPath:function () {
                    return $("#serverPath").val();
                }
            }
            ,done: function(res, index, upload){
                //$("#btn2").hide();
                layer.closeAll('loading');
                if(res.code == 200){
                    var tr = fileListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">'+res.data+'个服务上传成功!</span>');
                    tds.eq(3).html(''); //清空操作
                    layer.msg('上传成功!', {icon: 1,offset: 'rb'	});
                    return delete this.files[index];
                }
                layer.msg('上传成功!', {icon: 5,offset: 'rb'	});
                this.error(index, res);
            }
            ,error: function(index, res){
                    layer.closeAll('loading');
                    layer.msg(res.msg);
                    var tr = fileListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败('+res.msg+')</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide');
            }
            ,choose: function(obj){
            var files = this.files = obj.pushFile();
            $("#btn2").show();
            //读取本地文件
            obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));
                //单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });
                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });
                fileListView.append(tr);
            });
            },
            before:function () {
                let text =  $("#serverPath").val();
               if(text ==null){
                   layer.msg("请填写远程路径！");
                   return false;
               }
                layer.load();
                return true;
            }
        });
    });
</script>
</body>
</html>